<template>
    <div>
<h1>12.10作业</h1>
<table class="table table-border">
    <tbody>
        <tr class="bg-primary">
            <td>ID</td>
            <td>酒店名称</td>
            <td>电话</td>
            <td>图片</td>
            <td>地址</td>
            <td>活动名称</td>
            <td>时间</td>
        </tr>
        <tr v-for="item in data.list":key="item.Id">
            <td>{{item.Id}}</td>
            <td>{{item.ShopName}}</td>
            <td>{{item.Phone.substring(0,3)+"****"+item.Phone.substring(7)}}</td>
            <td><img :src="item.Photo"width="200"></td>
            <td>{{item.Address}}</td>
            <td>{{item.TeSeName}}</td>
            <td>{{moment(item.CreateTime).format("YYYY-MM-DD HH:mm:ss")}}</td>
        </tr>
    </tbody>
</table>
<select>
    <option value="">请选择</option>
    <option :value="item.id" v-for="item in citys":key="item.id">{{item.name}}</option>
</select>
    </div>
</template>



<script setup lang="ts">
import{ref,reactive}from 'vue'
import moment from 'moment';
let data = reactive({
  list:[
    {
      "Id": 1,
      "ShopName": "北京如家酒店",
      "Phone": "18888888888",
      "Photo": "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
      "Address": "北京昌平202",
      "TeSeName": "豪华婚宴",
      "CreateTime":"2024-09-14"
    },
   {
      "Id": 2,
      "ShopName": "北京汉庭酒店",
      "Phone": "18899988888",
      "Photo": "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
      "Address": "北京昌平201",
      "TeSeName": "豪华婚宴",
      "CreateTime":"2024-11-14"
    },
 {
      "Id": 3,
      "ShopName": "北京花儿顿酒店",
      "Phone": "18877788886",
      "Photo": "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
      "Address": "北京昌平208",
      "TeSeName": "豪华婚宴",
      "CreateTime":"2024-12-14"
    },
 ]
})
// let homework=ref([
//     {
//       Id: 1,
//       shopName: "北京如家酒店",
//       Phone: "18888888888",
//       Photo: "https://img1.baidu.com/it/u=3776951402,188974010&fm=253&fmt=auto?w=1026&h=665",
//       Address: "北京昌平202",
//       TeSeName: "豪华婚宴"
//     },
//     {
//       Id: 2,
//       shopName: "北京汉庭酒店",
//       Phone: "18899988888",
//       Photo: "https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380",
//       Address: "北京昌平201",
//       TeSeName: "豪华婚宴"
//     },
//     {
//       Id: 3,
//       shopName: "北京花儿顿酒店",
//       Phone: "18877788886",
//       Photo: "https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",
//       Address: "北京昌平208",
//       TeSeName: "豪华婚宴"
//     },

// ])

let citys = ref([
  {id:1,name:'北京'},
  {id:2,name:'天津'},
  {id:3,name:'上海'},
  {id:4,name:'河北'},
  {id:5,name:'山西'},
  {id:6,name:'山东'}
])



</script>

<style scoped>

</style>